<template>
	<div id="essays">
		<div class="top">
			<van-icon @click='back' class-prefix="iconfont" name="fanhui1" size="20" color="#000000"/>
			<van-cell title="短篇" is-link  value="了解更多">
				<template default>
					<div @click="columnsMore">了解更多</div>
				</template>
			</van-cell>
		</div>
		
		<div class="EsContent">
			<div v-for="item in this.$store.state.EssaysData.essayLists">
				<van-cell :value="item.title" />
				<div class="readContent" v-for="list in item.items">
					
					<h4>{{list.title}}</h4>
					
					<div class="info">
						<span>{{list.author.name}}</span>
						<span> · </span>
						<span>{{list.onSaleTime}}</span>
					</div>
					
					<!-- 书籍简介 -->
					<div class="summary">
						<div class="summaryText">
							<p>{{list.summary}}</p>
						</div>
						<!-- 图片 -->
						<div v-if="list.thumbnail" class="thumbnai">
							<img :src='list.thumbnail'>
						</div>
					</div>
					
					<!-- 评论 -->
					<div class="counts">
						<span class="read-count">{{list.readCount}}</span>
						<span class="comment-count">{{list.commentCount}}</span>
						<span class="favor-count">{{list.favorCount}}</span>
					</div>
					
				</div>
				
			</div>
		</div>
		
		<!-- 分类 -->
		<div class="essaysSort">
			<van-cell title="分类" size="large" />
			<van-grid :gutter="10" :column-num="3">
			  <van-grid-item v-for="item in this.$store.state.EssaysData.kinds" :key="item.name" :text="item.name" />
			</van-grid>
		</div>
	</div>
</template>

<script>
	export default{
		mounted() {
			this.$store.dispatch('getEssays')
			
		},
		methods:{
			// 跳转更多页面
			columnsMore(){
				this.$router.push('/ColumnsMore')
			},
			
			// 返回箭头
			back(){
				this.$router.back()
			}
		}
	}
</script>

<style lang="scss">
	#essays{
		background-color: #F8F9F9;
		
		// 顶部
		.top{
			margin-bottom: 1.25rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			box-shadow: 0 0.0625rem 0.25rem #dadada;
			background-color: #F8F9F9;
			position: sticky;
			top: 0;
			z-index: 8;

			.iconfont-fanhui1{
				margin-left: 0.9375rem;
			}
			
			.van-cell{
				background-color: #F8F9F9;
			}
			.van-cell::after{
				display: none;
			}
			.van-cell__title{
				font-size: 1.25rem;
				font-weight: bold;
			}
			.van-cell__value,.van-cell__right-icon{
				color: #389eac;
			}
		}
		
		// 中间
		.EsContent{
			.van-cell{
				background-color: #eff2f3;
			}
			.van-cell__value{
				color: #abc6cf;
			}
			
			.readContent{
				padding: 1.0625rem 0.9375rem;
				box-sizing: border-box;
				border-bottom: 1px solid #e7e7e7;
				
				&:last-child{
					border-bottom: 0px;
				}
			}
			// 作者和时间
			.info{
				margin-top: 0.375rem;
				font-size: 0.75rem;
				color: #a6a6a6;
			}
			// 简介
			.summary{
				margin-top: 0.75rem;
				height: 3.4375rem;
				display: flex;
				justify-content: space-between;
				
				// 文本
				.summaryText{
					flex: 8;
					p{
						font-size: 0.875rem;
						line-height: 1.4;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
				
				// 图片
				.thumbnai{
					flex: 2;
					width: 3.4375rem;
					height: 3.4375rem;
					float: right;
					margin-left: 0.9375rem;
					
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
			// 评论
			.counts{
				margin-top: 0.75rem;
				text-align: right;
				color: #a6a6a6;
				font-size: 0.8125rem;
				line-height: 1;
				
				span{
					margin-left: 0.625rem;
				}
				.read-count{
					padding-left: 1.0625rem;
					background: url('https://static.arkread.com/ark/pics/common/profile/icon-reading-gray.1f03889e.svg') left top 3px/13px 10px no-repeat;
				}
				.comment-count{
					padding-left: 0.9375rem;
					background: url('https://static.arkread.com/ark/pics/common/profile/icon-comment-gray.591a2788.svg') left top 3px/11px no-repeat;
				}
				.favor-count{
					padding-left: 1rem;
					background: url('https://static.arkread.com/ark/pics/common/profile/icon-heart-gray.ae1d4ef3.svg') left top 3px/12px 10px no-repeat;
				}
			}
			
		}
		
		// 分类
		.essaysSort{
			margin-top: 0.625rem;
			padding-bottom: 3.125rem;
			
			.van-cell{
				background-color: #eff2f3;
				margin-bottom: 0.625rem;
				padding: 0.6875rem 1rem;
			}
			.van-cell__title{
				color: #abc6cf;
				font-size: 0.875rem;
			}
			
			.van-grid-item__content{
				padding: 0.5rem 0.5rem;
				background-color: #eee;
			}
		}
		
	}
</style>